<!-- src/components/background-candidate/tabs/UploadBackgroundTab.vue -->
<template>
    <div class="upload-box">
        <a-upload
            :show-upload-list="false"
            :before-upload="beforeUpload"
            accept="image/*"
        >
            <a-button type="primary">上传壁纸</a-button>
        </a-upload>
    </div>
</template>

<script setup>
import { useBackground } from "@/hooks/useBackground";
import { message } from "ant-design-vue";
import { useSettingStore } from "@/stores/modules/setting.js";

const settingStore = useSettingStore();
const { updateBackground } = useBackground();

// 文件上传校验
function beforeUpload(file) {
    if (file.size / 1024 / 1024 >= settingStore.uploadFileSize) {
        message.error(`单张文件大小不得超过 ${settingStore.uploadFileSize}M`);
        return false;
    }
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
        // 这里可以根据需要处理上传的图片
        updateBackground(0, { src: reader.result });
    };
    reader.onerror = () => {
        message.error("读取文件失败，文件不存在");
    };
    return false; // 阻止自动上传
}
</script>

<style lang="less" scoped>
/* 从原style.less中提取相关样式 */
</style>
